<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pageHelp分页插件</title>
<script type="text/javascript" src="../lib/vue-2.5.13.js"></script>
<script type="text/javascript" src="../lib/jquery-3.2.1.js"></script>
<script src="../lib/element-2.0.11.js"></script>
<link rel="stylesheet" href="../lib/element-2.0.11.css">
</head>
<body>
	<div id="app">
		 <el-table
	        v-loading="loading"
	        stripe
	        ref="multipleTable"
	        :data="tableData"
	        tooltip-effect="dark"
	        border
	        @selection-change="handleSelectionChange">

	        <!-- 
	                表格项
	                sortable :是否排序
	                label:表单项名
	                prop:json对象对应的属性 
	                align:对齐方式 left/center/right   默认left
	                show-overflow-tooltip：boolean类型 为true时多余的内容会在 hover 时以 tooltip 的形式显示出来
	        -->
	        <el-table-column
	          type="selection"
	          width="55">
	        </el-table-column>

	        <el-table-column
	          current-row-key
	          sortable
	          align="center"
	          label="id"
	          width="120"
	          prop="id">
	          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
	        </el-table-column>

	        <el-table-column
	          sortable
	          align="center"
	          prop="usercode"
	          label="用户代码"
	          width="120">
	        </el-table-column>

	        <el-table-column
	          sortable
	          align="center"
	          prop="password"
	          label="用户密码"
	          show-overflow-tooltip>
	        </el-table-column>

	        <el-table-column
	          sortable
	          align="center"
	          prop="password"
	          label="用户名称"
	          show-overflow-tooltip>
	        </el-table-column>

	        <el-table-column
	          sortable
	          align="center"
	          prop="password"
	          label="是否可用"
	          show-overflow-tooltip>
	        </el-table-column>

	      </el-table>
	      <div style="margin-top: 20px">
	        <el-button size="mini" @click="selected()">编辑</el-button>
	        <el-button size="mini" @click="selected()">删除</el-button>
	        <el-button size="mini" @click="toggleSelection()">取消选择</el-button>
	      </div>
	      
	      <!-- 分页条 -->
	      <template>
	          <el-pagination
	              @size-change="handleSizeChange"
	              @current-change="handleCurrentChange"
	              :current-page="1"
	              :page-sizes="[10, 20, 30, 40]"
	              :page-size="pageSize"
	              layout="total, sizes, prev, pager, next, jumper"
	              :total='total'
	              >
	          </el-pagination>
	      </template>
	      <!-- 分页条结束 -->
	      <h3>{{multipleSelection}}</h3>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        //vue对象节点,指向父盒子
        el:'#app',
        //vue实例 的data属性
        data:{
            loading:false,
            sortable:false,            // sort:是否排序
            pageSize:10,               //pageSize:页面尺寸
            total:0,                  //total:总记录数
            currentPage:1,             //currentPage:当前页码
            multipleSelection: [],     //被选中行  [json]
            tableData:[],              //表格数据源
        },
        /*methods开始*/
        methods:{

            /*表格方法*/
            //用于多选表格，切换某一行的选中状态
            toggleSelection:function(rows) {
                if (rows) {
                  rows.forEach(function(row) {
                    vm.$refs.multipleTable.toggleRowSelection(row);
                    });
                  } else {
                    vm.$refs.multipleTable.clearSelection();
                  }
                },
            handleSelectionChange:function(val) {        

                  vm.multipleSelection = val;
            },
            //操作被选中的行对象
            //整合后台 可在调用其中的ajax方法传收数据
            selected:function (){
              if(vm.multipleSelection === null || vm.multipleSelection.length<0){
                   alert('请选择之后再操作');
              }else{
                alert(vm.multipleSelection);
                console.log(vm.multipleSelection);
              }        
              
            },
            /*表格方法结束*/
            
            /*分页条方法*/
            /*pageSize*/
            handleSizeChange:function(val) {
                
            },
            /*currPage*/
            handleCurrentChange:function(val) {
                
                //vm.tableData = vm.dataList;
            },
            /*分页条方法结束*/

            //加载数据
            loadData:function(currPage,pageSize){
            	var params={
            		"currPage":currPage,
            		"pageSize":pageSize,
            		"order":"desc"
            	};
            	$.ajax({
                     url: "/userTableList",
                     type: "POST",
                     data:JSON.stringify(params),
                     dataType: "json",
                     contentType: "application/json", 
                     success: function(res){
                       //总记录数
                       vm.total = res.total   
                       //[json]数据
                       vm.tableData = res.tableData;
                     },
                     error: function () {
                         vm.$alert("网络错误")

                     }
                 });
            }
        }
        // methods结束
    })
vm.loadData(1,10);
</script>
</html>